WebDebug

An all-in-one web debugging tool for Web developers and front-end debugging. Built-in browser, code injection, static server, Mac remote debugging and GitHub features let you preview pages, inject scripts, debug APIs and analyze resources right on your phone.

1. Overview

WebDebug is an all-in-one web debugging tool for Web developers and front-end scenarios. It combines a built-in browser, code injection, a static server, Mac remote debugging and common GitHub features, letting you preview pages, inject scripts, debug APIs and analyze resources right on your phone.

Main features:

• Built-in browser – open any URL to debug it without switching between your computer and phone.
• Debug panels – multiple built-in panels let you view Console logs, Network requests, DOM and elements on the phone.
• Shake to view network requests – shake your phone to show the current page’s network requests, and export the request log by email.
• Code injection – save multiple CSS / JS / HTML scripts and inject them into the current page anytime.
• Static server – run a folder on your phone as a static website to cover various debugging scenarios; computers or phones on the same LAN can access it by scanning a QR code.
• Mac remote debugging – once connected to a Mac, use Safari’s Web Inspector to set breakpoints, watch network traffic and edit DOM / CSS in real time.
• GitHub integration – built-in repository search, code search, trending and profile for quick reference and remote project management.
• Common tools – more than 80 everyday development tools, all running locally and offline.

Suitable for mobile page debugging, quick HTML preview and testing, front-end script authoring and validation, local static site integration, and GitHub code search.

2. Main Features

2.1 Built-in Browser & Debug Panels

• Launch directly into the browser home page; a clean search bar and toolbar layout.
• Supports favorites, history, web snapshot preview and cache management.
• While browsing, summon the debug panel to view directly on the phone:
  • Console – view page JS logs and errors.
  • Network – view network requests and responses.
  • Elements – view and edit DOM / CSS (supported by some panels).

2.2 Code Injection (Multi-Script Management)

• Enter Code Injection in the sidebar to reach the script list; create, edit, delete, enable or disable multiple scripts.
• Each script is saved independently and supports CSS, JS and HTML types.
• The browser detail page has a script button at the top that lists enabled scripts — pick one to inject.
• No auto-injection by default: even with injection timing set, you must manually select a script before it injects, to avoid accidental injection.
• Switching scripts reloads the page to take effect; Cancel Injection restores a clean page.
• The editor includes a symbol quick bar, where you can add custom strings for faster input.

Injection rules:

• CSS – write inside <style>...</style>, or use an external link <link href="..." rel="stylesheet">.
• JS – write inside <script>...</script>, or use <script src="..."></script>.
• HTML – content beyond the two tags above is inserted at the top of the page body.
• Use double quotes consistently in script content to avoid single-quote injection errors.

2.3 Built-in Static Server

• Enter Static Server in the sidebar to choose a serving folder and start / stop the server.
• The serving folder is chosen within the WebDebug folder in the app sandbox; it cannot go outside the system directory.
• While running, it shows the LAN address, local address, port and access code, with a QR code on the right for access.
• Computers or phones on the same WiFi can access it by scanning the QR code.
• Local browser access to http://127.0.0.1:8080/ needs no access code; other devices must enter the 6-digit code.
• Switching folders or restoring the default restarts the server automatically if it is running, taking effect immediately.
• Default port is 8080; when occupied, it automatically moves to 8081–8090.
• Broadcasts the service over the LAN via Bonjour for easy discovery by other devices.

2.4 Mac Remote Debugging (Safari Web Inspector)

• After connecting the iPhone to a Mac, the web page being browsed in the app appears under Safari’s Develop menu.
• Set breakpoints, view network requests and edit DOM / CSS in real time.
• Requires iOS 16.4 or later.

2.5 GitHub Integration

• Repositories – search repositories on GitHub.
• Code – search code on GitHub.
• Trending – browse trending projects on GitHub.
• Profile – view your personal page and basic info.

2.6 Built-in Tools

• Enter Common Tools in the sidebar; more than 80 development tools, all running locally and offline without network.
• Covers data format conversion (JSON / YAML / TOML / XML / SQL), encoding & conversion, encryption & hashing and auth (JWT / BCrypt / RSA), network IP (subnet calc, ports, MAC), text & generators (UUID, QR code, passwords), and more.
• Quickly handle everyday format processing, encryption/decryption and generation tasks on your phone.

3. Usage Help

3.1 Quick Start

1. Open the app to enter the built-in browser home page.
2. Type a URL or keyword in the search bar and tap search / go.
3. Once a page opens, browse it; summon the debug panel when you need to debug.

3.2 Using the Debug Panels

1. Open any web page.
2. Summon the debug panel through the debug entry on the browser page.
3. Switch between Console / Network / Elements tabs in the panel to view debug info.

3.3 Code Injection

1. Sidebar → Code Injection to enter the script list.
2. Tap New and write an injection script (choose type: CSS / JS / HTML).
3. After saving, tap the script button at the top of the browser detail page.
4. Select the script to inject; the page reloads automatically and takes effect.
5. To cancel, tap the script button again and choose Cancel Injection to restore a clean page.

3.4 Previewing Local Pages with the Static Server

1. Sidebar → Static Server to enter the serving panel.
2. Choose a serving folder (the WebDebug folder in the app sandbox).
3. Tap Start and wait for the server to finish starting.
4. On the phone, the local address http://127.0.0.1:8080/ can be accessed directly.
5. On other devices, ensure they connect to the same WiFi, then scan the page’s QR code or use a browser to open the displayed LAN address.
6. If an access code is required, enter the displayed 6-digit code.
7. When finished, tap Stop to close the service.

3.5 Mac Remote Debugging

1. Connect the iPhone to the Mac with a cable or the same WiFi.
2. On the Mac, open Safari → Settings → Advanced → check Show Develop menu in menu bar.
3. In Safari’s Develop menu, select your phone.
4. Select the web page inside the app.
5. Use the full Web Inspector for breakpoints, network and DOM / CSS debugging.

3.6 Using GitHub Features

1. Sidebar → GitHub.
2. Enter Repositories / Code / Trending / Profile as needed.
3. Search by keyword on the repository or code page.
4. Browse trending projects on the trending page; view your profile in Profile.

3.7 Common Settings

• Sidebar → Common Settings.
• Adjust the search engine (e.g. Bing / Google).
• Set code injection timing (before document / after document / disabled).
• Adjust other personalization options as needed.

3.8 FAQ

Q1: Nothing happens after code injection?

Check whether the script content follows the injection rules (type, quote style); make sure you have selected the script to inject on the browser detail page.

Q2: Other devices cannot access the static server?

Confirm both devices are on the same WiFi; confirm the correct 6-digit access code; check whether the port is occupied (default 8080, can move on).

Q3: Can’t see the web page in Mac remote debugging?

Confirm iOS 16.4 or later; confirm the Develop menu is enabled in Safari; confirm the phone is connected to the Mac (cable or same WiFi).

Q4: Search / page access behaves abnormally?

Try switching the search engine in Common Settings, or clear the web cache and retry.